<template>
   <div class="test-container">
     <h3>Test.vue 组件  --- 一共{{ books.length }}本书</h3>
     <h3 id="myh3"> 元素 </h3>
     <p id="myp"> message 的值为: {{ message }}</p>
     <button @click="message += '~'">点击添加</button>

   </div>
</template>

<script>
export default {
  props:['info'],
  data(){
    return{
      message: 'Hello Vue.js',
      // 定义 books 数组,存储的是所有图书的列表数据。默认为空数组!
      books: []
    }
  },
  methods:{
    show(){
      console.log('调用了 Test 的 show 方法')
    },
    // 使用 Ajax 请求数据
    initBookList(){
      const xhr = new XMLHttpRequest()
      xhr.addEventListener('load', () => {
        const result = JSON.parse(xhr.responseText)
        console.log(result)
        // 将获取到的对象数据给 books 数组
        this.books = result.data
      })
      xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
      xhr.send()
    }
  },
  // 创建阶段的第一个生命周期函数
  beforeCreate() {
    // console.log(this.info)
    // console.log(this.message)
    // this.show()
  },
  // * created 生命周期函数,非常常用
  created() {
    // 经常在 created 函数里面调用 methods 中的方法,请求服务器的数据
    // 并且,把请求到的数据,转存到 data 中,供 template 模板渲染的时候使用
    this.initBookList()

  },
  beforeMount() {
    console.log('beforeMount')
    const dom = document.querySelector('#myh3')
    // dom.style.backgroundColor = 'red'
    // dom.innterHTML = 'RED'
    // console.log(dom)
    // console.log(this.$el)
  },
  // 如果要操作当前组件的 DOM,最早,只能在 mounted 阶段执行
  mounted() {
    console.log(this.$el)
  },
  beforeUpdate() {
    // console.log('beforeUpdate')
    // console.log(this.message)
    // const dom = document.querySelector('#myp')
    // console.log(dom.innerHTML)
  },
  // 当数据变化之后,为了能操作到最新的 DOM 结构,必须把代码写到 updated 生命周期函数中
  updated() {
    console.log('updated')
    console.log(this.message)
    const dom = document.querySelector('#myp')
    console.log(dom.innerHTML)
  }

}
</script>

<style lang="less" scoped>
.test-container{
  background-color: dodgerblue;
  height: 200px;
}
</style>